// 导入 react 依赖包
import React, { Component } from 'react';
import ReactDOM from 'react-dom/client';

// 1 创建挂载点
const root = ReactDOM.createRoot(document.getElementById('root'));

class App extends React.Component {
  // 事件处理函数
  handleClick(e) {
    console.log('类中定义的事件处理函数');
    console.log(e);
    console.log('target', e.target.innerText);
    console.log('currentTarget', e.currentTarget);
    console.log('==>', e.target === e.currentTarget);
    if (e.target.innerText === '按钮1') {
      console.log('点击了按钮1');
    } else {
      console.log('点击了其他按钮');
    }
  }

  handleALink(e) {
    // 先执行用户添加的
    console.log('用户添加的======================================》');

    // 阻止执行默认事件处理函数
    e.preventDefault();
  }

  render() {
    return (
      <div>
        {/* <button onClick={(e) => console.log('行内，匿名绑定', e)}>按钮1</button> */}
        <div
          onClick={this.handleClick}
          style={{ padding: 32, backgroundColor: 'pink' }}
        >
          <button>按钮1</button>
          <button>按钮2</button>
          <button>按钮3</button>
          <button>按钮4</button>
          <a onClick={this.handleALink} href="http://www.baidu.com">
            点我
          </a>
        </div>
      </div>
    );
  }
}

function App2() {
  function handleClick(e) {
    console.log('按钮被点击了');
    console.log(e);
  }
  return (
    <div>
      <button onClick={handleClick}>按钮函数组件</button>
    </div>
  );
}

// 渲染的时候，一定要大些字母开头，以此来区分 React 自定义组件和 html 原生标签
root.render(
  <div>
    <App />
    {/* <App2 /> */}
  </div>
);
